<template>
	<div class="arguments-form">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="60px" size="small">
			<el-form-item label="对比度" prop="contrast">
				<el-slider v-model="dataForm.contrast" :marks="marks" />
			</el-form-item>
			<el-form-item label="亮度" prop="brightness">
				<el-slider v-model="dataForm.brightness" :marks="marks" />
			</el-form-item>
			<el-form-item label="锐度" prop="sharpness">
				<el-slider v-model="dataForm.sharpness" :marks="marks" />
			</el-form-item>
			<el-form-item label="饱和度" prop="saturation">
				<el-slider v-model="dataForm.saturation" :marks="marks" />
			</el-form-item>
			<el-form-item label=""></el-form-item>
			<el-form-item label="" label-width="0">
				<div style="margin: auto; text-align: center">
					<el-button type="primary" @click="saveHandle">保存</el-button>
					<el-button @click="resetHandle">重置</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { assign, keys, pick } from 'lodash'
import { reactive, ref, onMounted, watch } from 'vue'
import type { CSSProperties } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useGetVisibleCfgApi, useSaveVisibleCfgApi } from '@/api/settingModule'

interface Mark {
	style: CSSProperties
	label: string
}
type Marks = Record<number, Mark | string>

const marks = reactive<Marks>({
	0: '0',
	25: '25',
	50: '50',
	75: '75',
	100: '100'
})

const props = defineProps({
	options: {
		type: Object,
		default() {}
	}
})

const dataFormRef = ref()
const dataForm = reactive({
	channelId: '', // 设备id
	brightness: 50, // 亮度 0~100
	contrast: 50, // 对比度 0~100
	saturation: 50, // 饱和度 0~100
	sharpness: 50 // 锐度 0~100
})
const dataRules = ref({
	brightness: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	contrast: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	saturation: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	sharpness: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const getDetail = async () => {
	const { data } = await useGetVisibleCfgApi({ channelId: props.options.channelId })
	assign(dataForm, pick(data, keys(dataForm)))
}

onMounted(() => {
	getDetail()
})

// 保存
const saveHandle = () => {
	dataForm.channelId = props.options.channelId

	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		useSaveVisibleCfgApi(dataForm).then(() => {
			ElMessage.success({
				message: '保存成功',
				duration: 1000,
				onClose: () => {}
			})
		})
	})
}

const resetHandle = () => {
	dataFormRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.el-form-item {
	margin-top: 16px !important;
}
.el-slider {
	width: 90%;
}
</style>
